<script setup>
import { RouterView } from 'vue-router'
import Footer from '../components/Footer.vue';
import Header from '../components/Header.vue'
import router from '../router';
</script>

<template>
  <div class="layout">
    <el-container class="container">
      <el-aside class="aside">
        <div class="head">
          <div>
            <img src="../assets/logo.png" alt="logo">
            <span>游客服务平台</span>
          </div>
        </div>
        <div class="line" />
        <el-menu background-color="#222832" text-color="#fff" :router="true">
          <el-sub-menu index="1">
            <template #title>
              <span>服务平台</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/traveler/travelermain"
                :class="router.currentRoute.value.fullPath === '/traveler/travelermain' ? 'routerActiveCSS' : 'routerNotActiveCSS'">
                <el-icon>
                  <HomeFilled />
                </el-icon>
                首页
              </el-menu-item>
              <el-menu-item index="/traveler/emergencyInfoQuery"
                :class="router.currentRoute.value.fullPath === '/traveler/emergencyInfoQuery' ? 'routerActiveCSS' : 'routerNotActiveCSS'"><el-icon>
                  <Warning />
                </el-icon>应急信息查询</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <span>投诉系统</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/traveler/complaintsSubmit"
                :class="router.currentRoute.value.fullPath === '/traveler/complaintsSubmit' ? 'routerActiveCSS' : 'routerNotActiveCSS'"><el-icon>
                  <PhoneFilled />
                </el-icon>我要投诉</el-menu-item>
              <el-menu-item index="/traveler/complaintsResult"
                :class="router.currentRoute.value.fullPath === '/traveler/complaintsResult' ? 'routerActiveCSS' : 'routerNotActiveCSS'"><el-icon>
                  <Message />
                </el-icon>投诉处理结果</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <span>旅游查询</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/traveler/scenicQuery"
                :class="router.currentRoute.value.fullPath === '/traveler/scenicQuery' ? 'routerActiveCSS' : 'routerNotActiveCSS'"><el-icon>
                  <Guide />
                </el-icon>景点查询</el-menu-item>
              <el-menu-item index="/traveler/route"
                :class="router.currentRoute.value.fullPath === '/traveler/route' ? 'routerActiveCSS' : 'routerNotActiveCSS'"><el-icon>
                  <MapLocation />
                </el-icon>线路查询</el-menu-item>
              <el-menu-item index="/traveler/diningQuery"
                :class="router.currentRoute.value.fullPath === '/traveler/diningQuery' ? 'routerActiveCSS' : 'routerNotActiveCSS'"><el-icon>
                  <IceTea />
                </el-icon>餐饮娱乐查询</el-menu-item>
              <el-menu-item index="/traveler/showQuery"
                :class="router.currentRoute.value.fullPath === '/traveler/showQuery' ? 'routerActiveCSS' : 'routerNotActiveCSS'"><el-icon>
                  <Film />
                </el-icon>演出团体查询</el-menu-item>
              <el-menu-item index="/traveler/weather"
              :class="router.currentRoute.value.fullPath === '/traveler/weather' ? 'routerActiveCSS' : 'routerNotActiveCSS'"><el-icon>
                  <PartlyCloudy />
                </el-icon>天气查询</el-menu-item>
              <el-menu-item index="/traveler/status" 
              :class="router.currentRoute.value.fullPath === '/traveler/status' ? 'routerActiveCSS' : 'routerNotActiveCSS'"><el-icon>
                  <Bicycle />
                </el-icon>路况查询</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="4">
            <template #title>
              <span>酒店服务</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/traveler/hotelOrder" 
              :class="router.currentRoute.value.fullPath === '/traveler/hotelOrder' ? 'routerActiveCSS' : 'routerNotActiveCSS'"><el-icon>
                  <Coin />
                </el-icon>酒店预订</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container class="content">
        <Header />
        <div class="main">
          <router-view />
        </div>
        <Footer />
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.routerActiveCSS {
  color: #409eff !important;
}

.routerNotActiveCSS {
  color: #fff;
}

header {
  line-height: 1.5;
  max-height: 100px;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

nav {
  width: 100%;
  font-size: 12px;
  text-align: center;
  margin-top: 2rem;
}

nav a.router-link-exact-active {
  color: var(--color-text);
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  display: inline-block;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
}

nav a:first-of-type {
  border: 0;
}

.layout {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background-color: #ffffff;
  width: 100%;
}

.container {
  height: 100vh;
  overflow: hidden;
}

.aside {
  width: 200px;
  background-color: #222832;
  height: 100%;
  overflow-y: auto;
  -ms-overflow-style: none;

  /* Edge */
  &::-webkit-scrollbar {
    display: none;
    /* WebKit */
  }
}

/* .side{
    overflow: hidden;
    width: 182px;
  } */
/* .scroll-hide-div{
    width: max-content;
    overflow: hidden;
    background-color: #222832;
  } */
.head {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
}

.head>div {
  display: flex;
  align-items: center;
}

.head img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

.head span {
  font-size: 20px;
  color: #ffffff;
}

.line {
  border-top: 1px solid hsla(0, 0%, 100%, .05);
  border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.content {
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  overflow: hidden;
}

.main {
  height: 100vh;
  overflow: hidden;
  padding: 0px;
  overflow-y: auto;
  -ms-overflow-style: none;

  /* Edge */
  &::-webkit-scrollbar {
    display: none;
    /* WebKit */
  }
}

.header {
  height: 120px;
}
</style>
  
<style>
body {
  padding: 0;
  margin: 0;
  height: 100%;
}

.el-menu {
  border-right: none !important;
}

.el-submenu {
  border-top: 1px solid hsla(0, 0%, 100%, .05);
  border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.el-submenu:first-child {
  border-top: none;
}

.el-submenu [class^="el-icon-"] {
  vertical-align: -1px !important;
}

a {
  color: #409eff;
  text-decoration: none;
}

.el-pagination {
  text-align: center;
  margin-top: 20px;
}

.el-popper__arrow {
  display: none;
}</style>
  